<template>
  <div class="video-player">
    <div class="video-container" @click="toggleFullscreen">
      <video
        ref="videoRef"
        :src="videoSrc"
        controls
        preload="metadata"
        @loadedmetadata="onVideoLoaded"
        @error="onVideoError"
      >
        您的浏览器不支持视频播放
      </video>
      <div class="video-overlay" v-if="!videoLoaded">
        <div class="loading-text">
          <i class="icon-play"></i>
          <span>点击播放无人机实时画面</span>
        </div>
      </div>
    </div>
    <div class="video-controls">
      <button @click="togglePlay" class="control-btn">
        <i :class="isPlaying ? 'icon-pause' : 'icon-play'"></i>
      </button>
      <button @click="toggleMute" class="control-btn">
        <i :class="isMuted ? 'icon-volume-off' : 'icon-volume-up'"></i>
      </button>
      <button @click="toggleFullscreen" class="control-btn">
        <i class="icon-fullscreen"></i>
      </button>
    </div>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue'

export default {
  name: 'VideoPlayer',
  props: {
    videoSrc: {
      type: String,
      default: '/music/无人机.mp4' // 无人机视频路径
    },
    posterSrc: {
      type: String,
      default: '/images/92cc8c415be84e4697aaac771647ad7b.jpg' // 默认封面图片
    }
  },
  setup(props) {
    const videoRef = ref(null)
    const videoLoaded = ref(false)
    const isPlaying = ref(false)
    const isMuted = ref(false)

    const onVideoLoaded = () => {
      videoLoaded.value = true
    }

    const onVideoError = () => {
      console.warn('视频加载失败，使用占位内容')
    }

    const togglePlay = () => {
      if (!videoRef.value) return

      if (isPlaying.value) {
        videoRef.value.pause()
      } else {
        videoRef.value.play()
      }
      isPlaying.value = !isPlaying.value
    }

    const toggleMute = () => {
      if (!videoRef.value) return

      videoRef.value.muted = !videoRef.value.muted
      isMuted.value = videoRef.value.muted
    }

    const toggleFullscreen = () => {
      if (!videoRef.value) return

      if (document.fullscreenElement) {
        document.exitFullscreen()
      } else {
        videoRef.value.requestFullscreen()
      }
    }

    onMounted(() => {
      if (videoRef.value) {
        videoRef.value.addEventListener('play', () => {
          isPlaying.value = true
        })
        videoRef.value.addEventListener('pause', () => {
          isPlaying.value = false
        })
      }
    })

    return {
      videoRef,
      videoLoaded,
      isPlaying,
      isMuted,
      onVideoLoaded,
      onVideoError,
      togglePlay,
      toggleMute,
      toggleFullscreen
    }
  }
}
</script>

<style scoped>
.video-player {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.video-container {
  flex: 1;
  position: relative;
  background: #000;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
}

video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.video-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #4c9bfd;
}

.loading-text {
  text-align: center;
  font-size: 0.8rem;
}

.loading-text i {
  display: block;
  font-size: 2rem;
  margin-bottom: 0.5rem;
  color: #00f2f1;
}

.loading-text span {
  display: block;
  color: #fff;
}

.video-controls {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.5rem 0;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 0 0 8px 8px;
}

.control-btn {
  background: rgba(0, 108, 255, 0.2);
  border: 1px solid #006cff;
  border-radius: 4px;
  color: #4c9bfd;
  padding: 0.3rem 0.6rem;
  cursor: pointer;
  transition: all 0.3s ease;
}

.control-btn:hover {
  background: #006cff;
  color: #fff;
}

.control-btn i {
  font-size: 0.8rem;
}
</style>
